<meta charset="UTF-8">
<div id="querydev">
    <input type="file" id="file1" style="display: none;" />
    <input type="file" id="file2" style="display: none;" />
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.queryDev")}}</h3>
        <ul>
            <li>
                <i-input v-model.trim="queryString"></i-input>
            </li>
            <li>
                <i-button type="primary" icon="ios-search" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="exportAllDevice">{{$t("device.exportAllDevice")}}</i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="exportDevice">{{$t("device.exportCurrentDevice")}}</i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(-1)" :type="queryType=='ot' ? 'info':'default'" icon="ios-close-circle">{{$t("device.expired")}}<span v-if="queryType=='ot'">({{total}})</span></i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(60)" :type="queryType=='60ot' ? 'info':'md-checkbox'" icon="ios-search">{{$t("device.daysOverdue60")}}<span v-if="queryType=='60ot'">({{total}})</span></i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(7)" :type="queryType=='7ot' ? 'info':'default'" icon="ios-checkmark-circle">{{$t("device.daysOverdue7")}}<span v-if="queryType=='7ot'">({{total}})</span></i-button>
            </li>
            <li style="float:right;width:auto;">
                <i-button @click="expireNotifyTime(0)" :type="queryType=='all' ? 'info':'default'" icon="ios-tablet-portrait">{{$t("user.allDev")}}<span v-if="queryType=='all'">({{total}})</span></i-button>
            </li>
            <!-- all 7ot 60ot ot  -->  
        </ul>

        <div class="table-wraper">
            <i-table border ref="table" :columns="columns" :data="tableData" :height="taleHeight" :loading="loading"></i-table>
        </div>
        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changeDevicePage"></Page>
        </div>

        <Modal v-model="ownerInfoModal" width="500">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t('monitor.ownerInfo')}}</span>   
            </p>
            <div style="text-align:center">
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('alarm.devNum')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        {{ownerInfoData.deviceid}}
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('reportForm.name')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.ownername" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.contact1')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.phonenum1" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.contact2')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.phonenum2" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.reportForm.idNumber')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.idnum" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.reportForm.gender')}} : &nbsp;</i-col> 
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-select v-model="ownerInfoData.gender">
                            <i-option value="1">{{$t('device.reportForm.man')}}</i-option>
                            <i-option value="0">{{$t('device.reportForm.girl')}}</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('reportForm.address')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.address" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('monitor.remarks')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="ownerInfoData.ownerremark" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <i-button type="primary" style="width: 100%" @click="handleEditDeviceex">{{$t('header.submit')}}</i-button>
            </div>
        </Modal>

        <Modal v-model="insureInfoModal" width="500">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t('device.insureInfo')}}</span>
            </p>
            <div style="text-align:center">
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('alarm.devNum')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        {{insureInfoData.deviceid}}
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.securityNumber')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.securitynum" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('reportForm.vinno')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.vin" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.insureCompany')}} : &nbsp;</i-col> 
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.insurecompany" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">: &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.insurenum" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.insuranceDate')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.subinsuretime" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.effectiveDate')}} : &nbsp;</i-col> 
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.effecttime" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin:10px 0;">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.insureRemarks')}} : &nbsp;</i-col>
                    <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                        <i-input v-model.trim="insureInfoData.insuremark" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <i-button type="primary" style="width: 100%" @click="handleEditInsure">{{$t('header.submit')}}</i-button>
            </div>
        </Modal>

        <Modal v-model="modal" width="900" :title="$t('device.editDev')">
            <div style="width:700px;margin:10px auto">
                <Row style="margin: 10px 0" v-if="userType < 3"> 
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("reportForm.selectAccount")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <div class="search-wrapper">
                            <i-input v-model.trim="createrToUser" :icon="iconState" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" @on-click="focus"></i-input>
                            <transition name="fade">
                                <ul class="search-item-wrapper" v-show="isShowMatchDev" style="cursor: pointer;">
                                    <li v-for="item in userlists" style="padding:5px 10px;" @click="selectedCmd(item)" :class="{'ivu-select-item-focus':item == createrToUser}">
                                        <div :value="item" :key="item">
                                            <span style="cursor: pointer;">{{ item }}</span>
                                        </div>
                                    </li>
                                </ul>
                            </transition>
                        </div>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("user.grouping")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model.sync="groupid">
                            <i-option v-for="item in groupsList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">SIM : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim.number="simnum"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("alarm.overdueTime")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <date-picker type="date" v-model="expirenotifytime" :disabled="disabledOverdueTime"></date-picker>
                    </i-col>

                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("alarm.devName")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="devicename"></i-input>
                    </i-col>

                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.devType")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <!-- devicetype -->
                        <i-select v-model="devicetype" :disabled="isEditDeviceType">
                            <i-option v-for="item in deviceTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("alarm.devNum")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="deviceid" disabled></i-input>
                    </i-col>

                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.networkType")}} : &nbsp;</i-col> 
                    <i-col span="8">
                        <i-select v-model="teltype">
                            <i-option value="1">2G</i-option>
                            <i-option value="2">3G</i-option>
                            <i-option value="3">4G</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.forwardAddress")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="forwardurl" disabled></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.reportCount")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="reportedpoint"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.allReportCount")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="totalpoint"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.isUse")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="deviceenable">
                            <i-option value="0">{{$t("user.ban")}}</i-option>
                            <i-option value="1">{{$t("user.allow")}}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.tutelageUser")}} : &nbsp;</i-col>   
                    <i-col span="8">
                        <i-input v-model.trim="monitor"></i-input>
                    </i-col>
                </Row>


                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;{{$t("device.subEeditor")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="allowedit" :disabled="isAlloweditDisabled">
                            <i-option value="0">{{$t("user.ban")}}</i-option>
                            <i-option value="1">{{$t("user.allow")}}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.allowLogin")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="loginenable">
                            <i-option value="0">{{$t("user.ban")}}</i-option>
                            <i-option value="1">{{$t("user.allow")}}</i-option>
                        </i-select>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="6" :offset="7">
                        <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                    </i-col>
                    <i-col span="6" :offset="1">
                        <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                    </i-col>
                </Row>
            </div>
            <div slot="footer" style="height:20px;"></div>
        </Modal>
        <Modal v-model="ioModal" width="650">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t("device.ioConfig")}}</span>
            </p>
            <div>
                <Row style="height:32px;margin: 10px 0;">
                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                        {{$t("device.ioNumber")}}: 
                    </i-Col>
                    <i-Col span="8" style="height: 100%;line-height:32px;padding-left: 3px;">
                        <Input-Number :max="4" :min="0" v-model="ioCount" style="width: 100%;"></Input-Number>
                    </i-Col>
                </Row>
                <Row style="height:32px;margin: 10px 0;" style="height:32px;margin: 10px 0;" v-show="ioCount > 0">
                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                        {{$t("device.io1Open")}}：
                    </i-Col>
                    <i-Col span="8" style="height: 100%;padding-left: 3px;">
                        <i-input v-model.trim="ioObject.io1k" style="width: 100%;"></i-input>
                    </i-Col>
                    <i-Col span="2" style="height: 100%;line-height:32px;text-align: right;">
                        {{$t("device.io1Close")}}:
                    </i-Col>
                    <i-Col span="8" style="height: 100%;padding-left: 3px;">
                        <i-input v-model.trim="ioObject.io1g" style="width: 100%;"></i-input>
                    </i-Col>
                </Row>
                <Row style="height:32px;margin: 10px 0;" v-show="ioCount > 1">
                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                        {{$t("device.io2Open")}}:
                    </i-Col>
                    <i-Col span="8" style="height: 100%;padding-left: 3px;">
                        <i-input v-model.trim="ioObject.io2k" style="width: 100%;"></i-input>
                    </i-Col>
                    <i-Col span="2" style="height: 100%;line-height:32px;text-align: right;">
                        {{$t("device.io2Close")}}:
                    </i-Col>
                    <i-Col span="8" style="height: 100%;padding-left: 3px;">
                        <i-input v-model.trim="ioObject.io2g" style="width: 100%;"></i-input>
                    </i-Col>
                </Row>
                <Row style="height:32px;margin: 10px 0;" v-show="ioCount > 2">
                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                        {{$t("device.io3Open")}}：
                    </i-Col>
                    <i-Col span="8" style="height: 100%;padding-left: 3px;">
                        <i-input v-model.trim="ioObject.io3k" style="width: 100%;"></i-input>
                    </i-Col>
                    <i-Col span="2" style="height: 100%;line-height:32px;text-align: right;">
                        {{$t("device.io3Close")}}：
                    </i-Col>
                    <i-Col span="8" style="height: 100%;padding-left: 3px;">
                        <i-input v-model.trim="ioObject.io3g" style="width: 100%;"></i-input>
                    </i-Col>
                </Row>
                <Row style="height:32px;margin: 10px 0;" v-show="ioCount > 3">
                    <i-Col span="4" style="height: 100%;line-height:32px;text-align: right;">
                        {{$t("device.io4Open")}}：
                    </i-Col>
                    <i-Col span="8" style="height: 100%;padding-left: 3px;">
                        <i-input v-model.trim="ioObject.io4k" style="width: 100%;"></i-input>
                    </i-Col>
                    <i-Col span="2" style="height: 100%;line-height:32px;text-align: right;">
                        {{$t("device.io4Close")}}：
                    </i-Col>
                    <i-Col span="8" style="height: 100%;padding-left: 3px;">
                        <i-input v-model.trim="ioObject.io4g" style="width: 100%;"></i-input>
                    </i-Col>
                </Row>
            </div>
            <div slot="footer" style="text-align: center;">
                <i-input v-model.trim="referenceResourcesDeviceid" style="width:160px;" placeholder="$t('device.importDeviceidsTips')"></i-input>
                <i-button type="primary" style="width: 75px;" @click="referenceResources">{{$t("device.copy")}}</i-button>
                <i-button style="width: 75px;" type="primary" @click="setIoConfig">{{$t("header.setting")}}</i-button>
            </div>
        </Modal>

        <Modal v-model="oilModal" width="650">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t("device.oilMarking")}}</span>
            </p>
            <div>
                <Tabs type="card" v-model="tabsActive">
                    <tab-pane :label="$t('device.oil1')" style="min-height: 210px;" name="oil1">
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.threshold")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="10000" :min="1" v-model.trim.number="threshold1" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="1" style="line-height: 32px;">
                                L
                            </i-col>
                            <i-col span="14" style="line-height: 18px;">
                                {{$t("device.thresholdDesc")}}
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.tankShape")}}:
                            </i-col>
                            <i-col span="6">
                                <i-select v-model="tankShape1" style="width:128.75px">
                                    <i-option value="0">{{$t("device.noTank")}}</i-option>
                                    <i-option value="1">{{$t("device.cuboid")}}</i-option>
                                    <i-option value="2">{{$t("device.verticalCylinder")}}</i-option>  
                                    <i-option value="3">{{$t("device.transverseCylinder")}}</i-option>
                                    <i-option value="4">{{$t("device.irregular")}}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.tankVolume")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="1500" :min="1" v-model.trim.number="tankVolume1" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="3" style="line-height: 32px;">
                                L
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.sensorLength")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="1500" :min="1" v-model.trim.number="sensorLength1" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="1" style="line-height: 32px;">
                                cm
                            </i-col>
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.maxAnalogQuantity")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="65535" :min="1" v-model.trim.number="maxAdValue1" style="width:100%"></input-number>
                            </i-col>
                        </Row>
                        <div v-if="tankShape1 == 1">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="length1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankWidth")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="3" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="3" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape1 == 2">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="3" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape1 == 3">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankWidth")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="3" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape1 == 4">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.scale")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="0" v-model.trim.number="tagging1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="4" offset="1" style="line-height: 32px;text-align: center;">
                                    {{$t("device.calibratedFluid")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="0" v-model.trim.number="taggingOil1" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    L
                                </i-col>
                                <i-col span="2">
                                    <i-button type="primary" @click="addTaggingRowData1">{{$t("user.add")}}</i-button>
                                </i-col>
                            </Row>
                            <i-table border :columns="taggingColumns1" ref="taggingTab1" :data="taggingData1" height="200"></i-table>
                            <div style="margin: 10px 0 0 0;text-align: right;">

                                <i-button type="primary" @click="importTownerInfo1">{{$t("device.import")}}</i-button> 
                                <i-button type="info"  @click="exportDevice1">{{$t("reportForm.exportData")}}</i-button>
                                <i-button type="info" @click="downloadTemplate">{{$t('insure.templateDownload')}}</i-button>
                            </div>
                        </div>
                    </tab-pane>
                    <tab-pane :label="$t('device.oil2')" style="min-height: 210px;" name="oil2">
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.threshold")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="10000" :min="1" v-model.trim.number="threshold2" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="1" style="line-height: 32px;">
                                L
                            </i-col>
                            <i-col span="14" style="line-height: 18px;">
                                {{$t("device.thresholdDesc")}}
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.tankShape")}}:
                            </i-col>
                            <i-col span="6">
                                <i-select v-model="tankShape2" style="width:128.75px">
                                    <i-option value="0">{{$t("device.noTank")}}</i-option>
                                    <i-option value="1">{{$t("device.cuboid")}}</i-option>
                                    <i-option value="2">{{$t("device.verticalCylinder")}}</i-option>  
                                    <i-option value="3">{{$t("device.transverseCylinder")}}</i-option>
                                    <i-option value="4">{{$t("device.irregular")}}</i-option>
                                </i-select>
                            </i-col>
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.tankVolume")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="1500" :min="1" v-model.trim.number="tankVolume2" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="1" style="line-height: 32px;">
                                L
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.sensorLength")}}:
                            </i-col>
                            <i-col span="5">
                                <input-number :max="1500" :min="1" v-model.trim.number="sensorLength2" style="width:100%"></input-number>
                            </i-col>
                            <i-col span="1" style="line-height: 32px;">
                                cm
                            </i-col>
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.maxAnalogQuantity")}} :
                            </i-col>
                            <i-col span="5">
                                <input-number :max="65535" :min="1" v-model.trim.number="maxAdValue2" style="width:100%"></input-number>
                            </i-col>
                        </Row>
                        <div v-if="tankShape2 == 1">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="length2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankWidth")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape2 == 2">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankHeight")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="height2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape2 == 3">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankLength")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="width2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.tankDiameter")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="1" v-model.trim.number="diameter2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    cm
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="tankShape2 == 4">
                            <Row style="margin: 10px 0;">
                                <i-col span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.scale")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="0" v-model.trim.number="tagging2" style="width:100%"></input-number>
                                </i-col>
                                <i-col offset="1" span="4" style="line-height: 32px;text-align: center;">
                                    {{$t("device.calibratedFluid")}}:
                                </i-col>
                                <i-col span="5">
                                    <input-number :max="1500" :min="0" v-model.trim.number="taggingOil2" style="width:100%"></input-number>
                                </i-col>
                                <i-col span="1" style="line-height: 32px;">
                                    L
                                </i-col>
                                <i-col span="2">
                                    <i-button type="primary" @click="addTaggingRowData2">{{$t("user.add")}}</i-button>
                                </i-col>
                            </Row>
                            <i-table border :columns="taggingColumns2" ref="taggingTab2" :data="taggingData2" height="200"></i-table>
                            <div style="margin: 10px 0 0 0;text-align: right;">
                                <i-button type="primary" style="width:80px;" @click="importTownerInfo2">{{$t("device.import")}}</i-button> 
                                <i-button type="info" style="width:80px;" @click="exportDevice2">{{$t("reportForm.exportData")}}</i-button>
                                <i-button type="info" @click="downloadTemplate">{{$t('insure.templateDownload')}}</i-button>
                            </div>
                        </div>
                    </tab-pane>
                    <tab-pane :label="$t('device.addTempInfo')" style="min-height: 210px;" name="templateInfo"> 
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.templateName")}}: 
                            </i-col>
                            <i-col span="12">
                                <i-input v-model.trim="templatename" style="width:100%"></i-input>
                            </i-col>
                            <i-col span="2" style="line-height: 32px;text-align: center;color: red;">
                                {{$t("device.required")}}
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.oilRodBrand")}}:
                            </i-col>
                            <i-col span="12">
                                <i-input v-model.trim="brand" style="width:100%"></i-input>
                            </i-col>
                        </Row>
                        <Row style="margin: 10px 0;">
                            <i-col span="4" style="line-height: 32px;text-align: center;">
                                {{$t("device.OilRodModel")}}:  
                            </i-col>
                            <i-col span="12">
                                <i-input v-model.trim="model" style="width:100%"></i-input>
                            </i-col>
                        </Row>
                    </tab-pane>
                    <tab-pane :label="$t('device.templateList')" style="min-height: 210px;" name="template">
                        <i-table border :columns="templateColumns" :data="templateData" height="380"></i-table>
                    </tab-pane>
                </Tabs>
            </div>
            <div slot="footer" style="text-align: center;">
                <Checkbox v-show="tabsActive !== 'template'" v-model="isIndependent">{{$t("device.mergeStatistical")}}</Checkbox>
                <i-button v-show="tabsActive !== 'template'" style="width: 100px" type="primary" @click="saveOilDetectors">{{$t("bgMgr.submit")}}</i-button>
                <i-button v-show="tabsActive !== 'template'" style="width: 100px" type="primary" @click="saveTemplateInfo">{{$t("device.addTemplate")}}</i-button>
                <Checkbox v-show="tabsActive == 'template'" v-model="allTemp">{{$t("device.allTemplate")}}</Checkbox>
                <i-input v-show="tabsActive == 'template'" v-model.trim="matchingTemp" style="width:100px" placeholder="$t('device.filterTemplate')"></i-input>
                <i-button v-show="tabsActive == 'template'" style="width: 100px" type="primary" @click="queryTemplateInfo">{{$t("device.queryTemplate")}}</i-button>
            </div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#querydev",
            i18n: utils.getI18n(),
            data: {
                ioModal: false,
                ioCount: 0,
                ioObject: {
                    io1k: "",
                    io1g: "",
                    io2k: "",
                    io2g: "",
                    io3k: "",
                    io3g: "",
                    io4k: "",
                    io4g: "",
                },
                referenceResourcesDeviceid: "",
                isIndependent: false,
                queryType: 'all', // all 7ot 60ot ot
                matchingTemp: '',
                templatename: '',
                brand: '',
                model: "",
                tabsActive: '',
                allTemp: false,
                taleHeight: 300,
                isQuery: false,
                userType: Cookies.get('userType'),
                modal: false,
                queryString: "",
                loading: true,
                total: vRoot.$children[1].allDevCount,
                currentIndex: 1,
                teltype: '1',

                threshold1: 5,
                threshold2: 5,

                oilModal: false, //石油 
                tankShape1: '0', //油箱形状
                tankVolume1: 0, //油箱容积
                sensorLength1: 0, //传感器长度
                maxAdValue1: 65535,
                length1: 0,
                width1: 0,
                height1: 0,
                diameter1: 0, //圆柱体直径
                tagging1: 0,
                taggingOil1: 0,
                taggingData1: [],
                //
                tankShape2: '0', //油箱形状
                tankVolume2: 0, //油箱容积
                sensorLength2: 0, //传感器长度
                maxAdValue2: 65535,
                length2: 0,
                width2: 0,
                height2: 0,
                diameter2: 0, //圆柱体直径
                tagging2: 0,
                taggingOil2: 0,
                taggingData2: [],
                taggingColumns1: [{
                    type: 'index',
                    width: 50
                }, {
                    key: 'height',
                    title: vRoot.$t('device.scale'), 
                }, {
                    key: 'volume',
                    title: vRoot.$t('reportForm.oil'),
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 100,
                    render: function(h, params) {
                        var index = params.index;
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function() {
                                    vueInstanse.taggingData1.splice(index, 1);
                                }
                            }
                        }, vRoot.$t('monitor.delete')) 
                    },
                }],
                taggingColumns2: [{
                    type: 'index',
                    width: 50
                }, {
                    key: 'height',
                    title: vRoot.$t('device.scale'),
                }, {
                    key: 'volume',
                    title: vRoot.$t('reportForm.oil'),
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 100,
                    render: function(h, params) {
                        var index = params.index;
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: function() {
                                    vueInstanse.taggingData2.splice(index, 1);
                                }
                            }
                        }, vRoot.$t('monitor.delete'))
                    },
                }],
                columns: [{
                        title: vRoot.$t("alarm.devName"),
                        key: 'devicenamekey',
                    }, {
                        title: vRoot.$t("alarm.devNum"),
                        key: 'deviceidkey'
                    }, {
                        title: vRoot.$t("user.devType"),
                        key: 'devtype'
                    }, {
                        title: vRoot.$t("monitor.phoneNumber"),
                        key: 'simnumkey'
                    }, {
                        width: 100,
                        title: vRoot.$t("bgMgr.bindpwd"),
                        key: 'bindpwd',
                    },

                    {
                        title: vRoot.$t("bgMgr.addTime"),
                        key: 'createtimestr'
                    }, {
                        title: vRoot.$t("monitor.expireTime"),
                        key: 'expirenotifytimestr'
                    }, {
                        title: vRoot.$t("bgMgr.creater"),
                        key: 'creater',
                    }, {
                        title: vRoot.$t("user.grouping"),
                        key: 'groupname'
                    }, {
                        title: vRoot.$t("bgMgr.action"),
                        key: 'action',
                        width: 210,
                        render: function(h, params) {
                            return h('div', [
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: vRoot.$t("message.confirmDel")
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'on-ok': function() {
                                            vueInstanse.handleDelete(params.row.deviceid);
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                            disabled: Cookies.get('userType') !== '0'

                                        }
                                    }, vRoot.$t("bgMgr.delete"))
                                ]),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: function() {
                                            // vueInstanse.editDevice(params.row);
                                            vueInstanse.editDeviceIndex = params.index;
                                            editObject = params.row;
                                            vueInstanse.groupid = editObject.groupid;
                                            vueInstanse.createrToUser = editObject.creater;
                                            vueInstanse.setDeviceData();
                                            vueInstanse.modal = true;
                                        }
                                    }
                                }, vRoot.$t("bgMgr.edit")),
                                h('table-dropdown', {
                                    props: {
                                        params: params
                                    },
                                }, ''),
                            ])
                        }
                    }
                ],
                templateColumns: [{
                    title: vRoot.$t('device.templateName'),  
                    key: 'templatename',
                }, {
                    title: vRoot.$t('device.brand') ,
                    key: 'brand',
                    width: 80,
                }, {
                    title: vRoot.$t('device.model') ,
                    key: 'model',
                    width: 80,
                }, {
                    title: vRoot.$t('device.tankParameters'),  
                    render: function(h, params) {
                        var row = params.row;
                        return h(
                            'div', {}, [
                                h('p', {}, row.oil1),
                                h('p', {}, row.oil2),
                            ]
                        )
                    },
                }, {
                    width: 130,
                    title: vRoot.$t('alarm.action'),
                    render: function(h, params) {
                        var row = params.row;
                        return h(
                            'div', {}, [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: function() {
                                            var oildetectors = row.oildetectors;
                                            oildetectors.forEach(function(item, index) {
                                                if (index == 0) {
                                                    vueInstanse.tankShape1 = String(item.appearance);
                                                    vueInstanse.tankVolume1 = item.capacity;
                                                    vueInstanse.sensorLength1 = item.detectorLength
                                                    vueInstanse.diameter1 = item.diameter;
                                                    vueInstanse.height1 = item.height;
                                                    vueInstanse.length1 = item.length;
                                                    vueInstanse.width1 = item.width;
                                                    vueInstanse.maxAdValue1 = item.maxAdValue;
                                                    vueInstanse.taggingData1 = item.markers;
                                                    vueInstanse.threshold1 = item.threshold;
                                                } else if (index == 1) {
                                                    vueInstanse.tankShape2 = String(item.appearance);
                                                    vueInstanse.tankVolume2 = item.capacity;
                                                    vueInstanse.sensorLength2 = item.detectorLength
                                                    vueInstanse.diameter2 = item.diameter;
                                                    vueInstanse.height2 = item.height;
                                                    vueInstanse.length2 = item.length;
                                                    vueInstanse.width2 = item.width;
                                                    vueInstanse.maxAdValue2 = item.maxAdValue;
                                                    vueInstanse.taggingData2 = item.markers;
                                                    vueInstanse.threshold2 = item.threshold;
                                                }
                                            });
                                            vueInstanse.$Message.success(vRoot.$t('device.importSucc')); 
                                        }
                                    }
                                }, vRoot.$t('device.import')),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '5px'
                                    },
                                    on: {
                                        click: function() {
                                            vueInstanse.deleteOilDetectorTemplate(row.oildetectortemplateid, params.index);
                                        }
                                    }
                                },vRoot.$t('monitor.delete'))
                            ]
                        )
                    },
                }],
                templateData: [],
                editDeviceIndex: null,
                tableData: [],
                recordsList: [],
                groupsList: [],

                iconState: "ios-arrow-down",
                deviceid: "",
                devicename: "",
                devicetype: "",
                simnum: "",
                expirenotifytime: "",
                loginenable: "1",
                deviceenable: "0",
                deviceTypeList: [],
                reportedpoint: 0,
                totalpoint: 1500,
                groupid: '',
                forwardurl: "",
                allowedit: '0',
                createrToUser: "",
                userlists: [],
                isShowMatchDev: false,
                monitor: "",
                ownerInfoModal: false,
                ownerInfoData: { //编辑的设备信息
                    deviceid: '',
                    ownername: '',
                    phonenum1: '',
                    phonenum2: '',
                    idnum: '',
                    gender: '0',
                    ownerremark: '',
                    address: ''
                },
                insureInfoModal: false,
                insureInfoData: { //编辑的设备信息
                    deviceid: '',
                    securitynum: '', //防盗号
                    vin: '', //车架号
                    insurecompany: '', //保险公司
                    insurenum: '', //保单号
                    subinsuretime: '', //投保日期
                    effecttime: '', //生效日期
                    insuremark: '', //保险备注
                },
            },
            methods: {
                downloadTemplate: function() {
                    var a = document.createElement('a');
                    a.href = myUrls.apihost + 'oiladtemplate.xlsx';
                    a.download = 'oiladtemplate.xlsx';
                    a.click();
                },
                querySpeedSetting: function(params) {
                    this.speedSettingModal = true;

                },
                onClickCalibration: function(params) {
                    this.oilModal = true;
                    this.tabsActive = 'oil1';
                    editObject = params.row;
                    this.queryOilInfo(params.row.deviceid);
                },
                onClickIoSetting: function(params) {
                    editObject = params.row;
                    this.queryIoConfig(editObject.deviceid);
                    this.ioModal = true;
                },
                queryCarMasterInfo: function(params) {
                    utils.queryDeviceex(params.row.deviceid, function(resp) {
                        vueInstanse.ownerInfoData.deviceid = params.row.deviceid;
                        if (resp) {
                            vueInstanse.ownerInfoData.ownername = resp.ownername;
                            vueInstanse.ownerInfoData.phonenum1 = resp.phonenum1;
                            vueInstanse.ownerInfoData.phonenum2 = resp.phonenum2;
                            vueInstanse.ownerInfoData.idnum = resp.idnum;
                            vueInstanse.ownerInfoData.gender = String(resp.gender);
                            vueInstanse.ownerInfoData.ownerremark = resp.remark;
                            vueInstanse.ownerInfoData.address = resp.address;
                        } else {
                            vueInstanse.ownerInfoData.ownername = '';
                            vueInstanse.ownerInfoData.phonenum1 = '';
                            vueInstanse.ownerInfoData.phonenum2 = '';
                            vueInstanse.ownerInfoData.idnum = '';
                            vueInstanse.ownerInfoData.gender = '';
                            vueInstanse.ownerInfoData.ownerremark = '';
                            vueInstanse.ownerInfoData.address = '';
                        }
                        vueInstanse.ownerInfoModal = true;
                    });
                },
                referenceResources: function() {
                    if (this.referenceResourcesDeviceid == '') {
                        this.$Message.error(this.$t('device.inputDeviceId'));
                        return;
                    }
                    this.queryIoConfig(this.referenceResourcesDeviceid);
                },
                queryInsureInfo: function(params) {
                    utils.queryDeviceex(params.row.deviceid, function(resp) {
                        console.log('resp', resp)
                        vueInstanse.insureInfoData.deviceid = params.row.deviceid;
                        if (resp) {
                            vueInstanse.insureInfoData.securitynum = resp.securitynum;
                            vueInstanse.insureInfoData.vin = resp.vin;
                            vueInstanse.insureInfoData.insurecompany = resp.insurecompany;
                            vueInstanse.insureInfoData.insurenum = resp.insurenum;
                            vueInstanse.insureInfoData.subinsuretime = resp.subinsuretime;
                            vueInstanse.insureInfoData.effecttime = resp.effecttime;
                            vueInstanse.insureInfoData.insuremark = resp.insuremark;
                        } else {
                            vueInstanse.insureInfoData.securitynum = '';
                            vueInstanse.insureInfoData.vin = '';
                            vueInstanse.insureInfoData.insurecompany = '';
                            vueInstanse.insureInfoData.insurenum = '';
                            vueInstanse.insureInfoData.subinsuretime = '';
                            vueInstanse.insureInfoData.effecttime = '';
                            vueInstanse.insureInfoData.insuremark = '';
                        }
                        vueInstanse.insureInfoModal = true;
                    });
                },
                queryIoConfig: function(deviceid) {
                    var me = this;
                    var url = myUrls.queryIoConfig();
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(resp) {
                        if (resp.status == 0) {
                            var records = resp.records;
                            if (records) {
                                for (var i = 0; i < 4; i++) {
                                    var item = records[i];
                                    if (item) {
                                        me.ioObject['io' + (i + 1) + 'k'] = item.openstr;
                                        me.ioObject['io' + (i + 1) + 'g'] = item.closestr;
                                    } else {
                                        me.ioObject['io' + (i + 1) + 'k'] = '';
                                        me.ioObject['io' + (i + 1) + 'g'] = '';
                                    }
                                }
                                me.ioCount = records.length;
                            } else {
                                for (var i = 0; i < 4; i++) {
                                    me.ioObject['io' + (i + 1) + 'k'] = '';
                                    me.ioObject['io' + (i + 1) + 'g'] = '';
                                }
                                me.ioCount = 0;
                                me.$Message.error(vRoot.$t('monitor.dataEmptyTips'));
                            }

                        } else {
                            me.$Message.error(vRoot.$t('monitor.queryFail'));
                        }
                    });
                },
                setIoConfig: function() {
                    var url = myUrls.setIoConfig();
                    var records = [],
                        me = this;
                    for (var i = 1; i <= this.ioCount; i++) {
                        records.push({
                            index: i,
                            openstr: this.ioObject['io' + i + 'k'],
                            closestr: this.ioObject['io' + i + 'g'],
                        })
                    }
                    var data = {
                        deviceid: editObject.deviceid,
                        records: records
                    }

                    utils.sendAjax(url, data, function(resp) {
                        console.log(resp);
                        if (resp.status === 0) {
                            me.ioModal = false;
                            me.$Message.success(vRoot.$t('monitor.setupSucc'));
                        } else {
                            me.$Message.error(vRoot.$t('monitor.setupFail'));
                        }
                    })

                },
                changeDevicePage: function(index) {
                    this.currentIndex = index;
                    this.getDeviceList(false, this.getQueryTypeNumber());
                },
                deleteOilDetectorTemplate: function(id, index) {
                    var me = this;
                    utils.sendAjax(myUrls.deleteOilDetectorTemplate(), {
                        oildetectortemplateid: id
                    }, function(resp) {
                        if (resp.status == 0) {
                            me.$Message.success(vRoot.$t('message.deleteSucc')); 
                            me.templateData.splice(index, 1);
                        } else if (resp.status == 1) {
                            me.$Message.error(vRoot.$t('message.noAuthority'));  
                        } else {
                            me.$Message.error(vRoot.$t('message.deleteFail'));  
                        }
                    })
                },
                queryTemplateInfo: function() {
                    var me = this;
                    utils.sendAjax(myUrls.queryOilDetectorTemplate(), {
                        isall: this.allTemp
                    }, function(resp) {
                        if (resp.status === 0) {
                            me.$Message.success(vRoot.$t('monitor.querySucc'));
                            var records = resp.records;
                            if (me.matchingTemp === '') {
                                records.forEach(function(item) {
                                    var oildetectors = item.oildetectors;
                                    var oil1 = oildetectors[0];
                                    var oil2 = oildetectors[1];
                                    item.oil1 = me.getTankShape(oil1.appearance) + '/' + oil1.capacity + '/' + oil1.detectorLength;
                                    item.oil2 = me.getTankShape(oil2.appearance) + '/' + oil2.capacity + '/' + oil2.detectorLength;
                                });
                                me.templateData = records;
                            } else {
                                var filters = [];
                                records.forEach(function(item) {
                                    var oildetectors = item.oildetectors;
                                    var oil1 = oildetectors[0];
                                    var oil2 = oildetectors[1];
                                    item.oil1 = me.getTankShape(oil1.appearance) + '/' + oil1.capacity + '/' + oil1.detectorLength;
                                    item.oil2 = me.getTankShape(oil2.appearance) + '/' + oil2.capacity + '/' + oil2.detectorLength;
                                    if (item.templatename.indexOf(me.matchingTemp) != -1 || item.brand.indexOf(me.matchingTemp) != -1 || item.model.indexOf(me.matchingTemp) != -1) {
                                        filters.push(item);
                                    }
                                });
                                me.templateData = filters;
                            }
                        } else {
                            me.$Message.error(vRoot.$t('monitor.queryFail'));
                        }
                    })
                },
                getTankShape: function(type) {
                    var tankShape = '';
                    switch (type) {
                        case 0:
                            tankShape = vRoot.$t('device.noTank') ; 
                            break;
                        case 1:
                            tankShape = vRoot.$t('device.cuboid') ;
                            break;
                        case 2:
                            tankShape = vRoot.$t('device.verticalCylinder');
                            break;
                        case 3:
                            tankShape = vRoot.$t('device.transverseCylinder');
                            break;
                        case 4:
                            tankShape = vRoot.$t('device.irregular');
                            break;
                    }
                    return tankShape
                },
                saveTemplateInfo: function() {
                    if (this.tabsActive == 'templateInfo') {
                        if (this.templatename.length === 0) {
                            this.$Message.error(vRoot.$t('device.requiredTempName'));  
                            return;
                        }
                        var oilDetector1 = {
                            appearance: Number(this.tankShape1),
                            capacity: this.tankVolume1,
                            detectorLength: this.sensorLength1,
                            maxAdValue: this.maxAdValue1,
                            length: this.length1,
                            width: this.width1,
                            height: this.height1,
                            diameter: this.diameter1,
                            markers: this.taggingData1,
                            threshold: this.threshold1
                        };
                        var oilDetector2 = {
                            appearance: Number(this.tankShape2),
                            capacity: this.tankVolume2,
                            detectorLength: this.sensorLength2,
                            maxAdValue: this.maxAdValue2,
                            length: this.length2,
                            width: this.width2,
                            height: this.height2,
                            diameter: this.diameter2,
                            markers: this.taggingData2,
                            threshold: this.threshold2
                        };
                        var oildetectors = [oilDetector1, oilDetector2];
                        var url = myUrls.saveOilDetectors(),
                            me = this;
                        var data = {
                            templatename: this.templatename,
                            deviceid: editObject.deviceid,
                            oildetectors: oildetectors,
                            independent: me.isIndependent ? 0 : 1,
                        };
                        me.brand ? data.brand = me.brand : null;
                        me.model ? data.model = me.model : null;
                        utils.sendAjax(myUrls.saveOilDetectorTemplate(), data, function(resp) {
                            if (resp.status == 0) {
                                me.$Message.success(vRoot.$t('device.tempSaveSucc'));  
                            } else {
                                me.$Message.error(vRoot.$t('device.tempSaveFail'));
                            }
                        });
                    } else {
                        this.tabsActive = 'templateInfo';
                    }
                },
                addTaggingRowData1: function() {
                    var isHas = false;
                    var taggingData = deepClone(this.taggingData1);
                    for (var i = 0; i < taggingData.length; i++) {
                        var item = taggingData[i];
                        if (item.height === this.tagging1) {
                            isHas = true;
                            break;
                        }
                    }
                    if (isHas) {
                        this.$Message.error(vRoot.$t('device.scaleAlreadyExists'));
                    } else {
                        taggingData.push({
                            height: this.tagging1,
                            volume: this.taggingOil1
                        });
                        taggingData.sort(function(a, b) {
                            return b.height - a.height;
                        });
                        this.taggingData1 = taggingData;
                    }

                },
                addTaggingRowData2: function() {
                    var isHas = false;
                    var taggingData = deepClone(this.taggingData2);
                    for (var i = 0; i < taggingData.length; i++) {
                        var item = taggingData[i];
                        if (item.height === this.tagging2) {
                            isHas = true;
                            break;
                        }
                    }
                    if (isHas) {
                        this.$Message.error(vRoot.$t('device.scaleAlreadyExists'));
                    } else {
                        taggingData.push({
                            height: this.tagging2,
                            volume: this.taggingOil2
                        });
                        taggingData.sort(function(a, b) {
                            return b.height - a.height;
                        });
                        this.taggingData2 = taggingData;
                    }
                },
                handleEditInsure: function() {
                    var me = this;
                    utils.editDeviceex('insure', me.ownerInfoData, function(resp) {
                        if (resp.status === 0) {
                            me.$Message.success(vRoot.$t('message.changeSucc')); 
                            me.ownerInfoModal = false;
                        } else {
                            me.$Message.error(vRoot.$t('message.changeFail'));
                        }
                    });
                },
                handleEditDeviceex: function() {
                    var me = this;
                    utils.editDeviceex('owner', me.ownerInfoData, function(resp) {
                        console.log(resp);
                        if (resp.status === 0) {
                            me.$Message.success(vRoot.$t('message.changeSucc'));
                            me.ownerInfoModal = false;
                        } else {
                            me.$Message.error(vRoot.$t('message.changeFail'));
                        }
                    });
                },
                handlerClickQuery() {
                    var self = this;
                    this.currentIndex = 1;
                    self.getDeviceList(false, this.getQueryTypeNumber());
                },
                getQueryTypeNumber: function() {
                    var result = 0;
                    switch (this.queryType) {
                        case 'all':
                            result = 0;
                            break;
                        case '7ot':
                            result = 7;
                            break;
                        case '60ot':
                            result = 60;
                            break;
                        case 'ot':
                            result = -1;
                            break;
                    }
                    return result;
                },
                expireNotifyTime: function(dayNumber) {
                    console.log('dayNumber', dayNumber);
                    switch (dayNumber) {
                        case 0:
                            this.queryType = 'all';
                            break;
                        case 7:
                            this.queryType = '7ot';
                            break;
                        case 60:
                            this.queryType = '60ot';
                            break;
                        case -1:
                            this.queryType = 'ot';
                            break;
                    }
                    this.currentIndex = 1;
                    this.getDeviceList(false, dayNumber);
                },
                getDevType: function(row) {

                    var devType = "";
                    var item = vstore.state.deviceTypes[row.devicetype];
                    var label = item.typename;
                    if (item.remark) {
                        label += "(" + item.remark + ")";
                    }

                    devType = label;


                    return devType;

                },
                filterDataInfo: function(devList) {
                    var me = this;
                    var data = [];
                    devList.forEach(function(dev) {
                        dev.devtype = me.getDevType(dev);
                        dev.deviceidkey = "\t" + dev.deviceid;
                        dev.devicenamekey = "\t" + dev.devicename;
                        dev.simnum ? (dev.simnumkey = "\t" + dev.simnum) : (dev.simnumkey = "");
                        dev.bindpwd = dev.bindpwd != null ? dev.bindpwd : '';
                        dev.createtimestr = DateFormat.longToDateTimeStr(dev.createtime, timeDifference);
                        dev.expirenotifytimestr = DateFormat.longToDateTimeStr(dev.expirenotifytime, timeDifference);
                        dev.groupname = me.getGroupName(dev.groupid);
                        dev.pinYin = __pinyin.getPinyin(dev.devicename);
                        dev.firstLetter = __pinyin.getFirstLetter(dev.devicename);
                        data.push(dev);
                    });
                    return data;
                },
                resetDevicePwd: function(index) {
                    var me = this;
                    var deviceid = this.tableData[index].deviceid;
                    var url = myUrls.resetDeviceLoginPwd();
                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(resp) {
                        if (resp.status === 0) {
                            me.$Message.success((isZh ? "密码重置为:" : "Password reset to :") + resp.newpass);
                        } else {
                            me.$Message.error(isZh ? "密码重置失败" : "Password Reset Failed");
                        }
                    });
                },
                getGroupName: function(groupId) {
                    var groupName = "";
                    if (this.allGroups[groupId] !== undefined) {
                        groupName = this.allGroups[groupId].groupname;
                    }
                    return groupName;
                },
                getDeviceList: function(isAll, expiredays) {
                    var me = this;
                    var url = myUrls.queryDevices();
                    // var url = myUrls.queryDeviceListWithGroupInfo();
                    me.loading = true;
                    utils.sendAjax(url, {
                        count: 10,
                        keyword: this.queryString,
                        offset: this.currentIndex - 1,
                        all: isAll,
                        expiredays: expiredays
                    }, function(resp) {
                        me.loading = false;
                        if (resp.status == 0 && resp.devices != null) {
                            if (isAll) {

                            } else {
                                me.tableData = me.filterDataInfo(resp.devices);
                                me.total = resp.totalcount;
                            }
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    }, function() {
                        me.loading = false;
                    });
                },
                handleDelete: function(deviceid) {
                    var me = this;
                    var url = myUrls.deleteDevice();
                    var data = {
                        deviceid: deviceid
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            rootuser = null;
                            isNeedRefresh = true;
                            if (deviceid == globalDeviceId) {
                                globalDeviceId = "";
                                vRoot.$store.commit('currentDeviceId', "");
                            }

                            me.$Message.success(me.$t("message.deleteSucc"));


                            me.tableData.forEach(function(itme, index) {
                                if (itme.deviceid == deviceid) {
                                    me.$delete(me.tableData, index);
                                }
                            });


                            me.recordsList.forEach(function(itme, index) {
                                if (itme.deviceid == deviceid) {
                                    me.$delete(me.recordsList, index);
                                }
                            });

                            // me.total = me.recordsList.length;
                            // me.tableData = me.recordsList.slice(me.currentIndex - 1, 10);
                        } else {
                            me.$Message.error(me.$t("message.deleteFail"));
                        }
                        me.modal = false;

                    });
                },
                queryOilInfo: function(deviceid) {
                    var url = myUrls.queryOilDetectors(),
                        me = this;

                    utils.sendAjax(url, {
                        deviceid: deviceid
                    }, function(resp) {
                        me.isIndependent = resp.independent == 0 ? true : false;
                        if (resp.oildetectors != null) {
                            me.$Message.success(vRoot.$t('monitor.querySucc')); 
                            var oildetectors = resp.oildetectors;
                            oildetectors.forEach(function(item, index) {
                                if (index == 0) {
                                    me.tankShape1 = String(item.appearance);
                                    me.tankVolume1 = item.capacity;
                                    me.sensorLength1 = item.detectorLength
                                    me.diameter1 = item.diameter;
                                    me.height1 = item.height;
                                    me.length1 = item.length;
                                    me.width1 = item.width;
                                    me.maxAdValue1 = item.maxAdValue;
                                    me.taggingData1 = item.markers;
                                    me.threshold1 = item.threshold;
                                } else if (index == 1) {
                                    me.tankShape2 = String(item.appearance);
                                    me.tankVolume2 = item.capacity;
                                    me.sensorLength2 = item.detectorLength
                                    me.diameter2 = item.diameter;
                                    me.height2 = item.height;
                                    me.length2 = item.length;
                                    me.width2 = item.width;
                                    me.maxAdValue2 = item.maxAdValue;
                                    me.taggingData2 = item.markers;
                                    me.threshold2 = item.threshold;
                                }
                            })
                        } else {
                            me.$Message.success(vRoot.$t('device.dataEmptyTips'));
                        }
                    });
                },
                saveOilDetectors: function() {
                    var oilDetector1 = {
                        appearance: Number(this.tankShape1),
                        capacity: this.tankVolume1,
                        detectorLength: this.sensorLength1,
                        maxAdValue: this.maxAdValue1,
                        length: this.length1,
                        width: this.width1,
                        height: this.height1,
                        diameter: this.diameter1,
                        markers: this.taggingData1,
                        threshold: this.threshold1
                    };
                    var oilDetector2 = {
                        appearance: Number(this.tankShape2),
                        capacity: this.tankVolume2,
                        detectorLength: this.sensorLength2,
                        maxAdValue: this.maxAdValue2,
                        length: this.length2,
                        width: this.width2,
                        height: this.height2,
                        diameter: this.diameter2,
                        markers: this.taggingData2,
                        threshold: this.threshold2
                    };
                    var oildetectors = [oilDetector1, oilDetector2];
                    var url = myUrls.saveOilDetectors(),
                        me = this;
                    var data = {
                        deviceid: editObject.deviceid,
                        oildetectors: oildetectors,
                        independent: me.isIndependent ? 0 : 1,
                    };
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            me.$Message.success(vRoot.$t('message.saveSucc'));    
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                exportDevice: function() {
                    this.$refs.table.exportCsv({
                        filename: 'deviceids',
                        columns: this.columns.filter(function(col, index) {
                            return index < 8
                        }),
                        data: this.tableData,
                        quoted: true,
                    });
                },
                exportAllDevice: function() {
                    var url = myUrls.queryDevices(),
                        me = this;
                    utils.sendAjax(url, {
                        all: true,
                    }, function(resp) {
                        if (resp.status == 0 && resp.devices != null) {
                            me.$Message.success(vRoot.$t('message.exportSucceeded'));    
                            me.$refs.table.exportCsv({
                                filename: 'deviceids',
                                columns: me.columns.filter(function(col, index) {
                                    return index < 9
                                }),
                                data: me.filterDataInfo(resp.devices),
                                quoted: true,
                            });
                        } else {
                            me.$Message.error(vRoot.$t('message.exportFailed'));
                        }
                    }, function() {
                        me.loading = false;
                        me.$Message.error(vRoot.$t('message.networkError'));
                    });
                },
                handleSubmit: function() {
                    var me = this;
                    var url = myUrls.editDevice();
                    if (this.expirenotifytime == "") {
                        me.$Message.error(me.$t("message.plSelectTime"));
                        return;
                    }
                    var data = {
                        deviceid: this.deviceid,
                        devicetype: this.devicetype,
                        expirenotifytime: new Date(this.expirenotifytime).getTime(),
                        loginenable: Number(this.loginenable),
                        deviceenable: Number(this.deviceenable),
                        allowedit: Number(this.allowedit)
                    };

                    if (this.devicename) {
                        data.devicename = this.devicename;
                    };
                    if (this.teltype) {
                        data.teltype = Number(this.teltype);
                    };


                    if (this.simnum !== "") {
                        data.simnum = this.simnum;
                    };
                    if (this.groupid !== "" && this.groupsList.length) {
                        data.groupid = this.groupid;
                    } else {
                        data.groupid = 0;
                    };

                    if (this.reportedpoint == 0 || this.reportedpoint && !isNaN(this.reportedpoint)) {
                        data.reportedpoint = Number(this.reportedpoint);
                    }

                    if (this.totalpoint && !isNaN(this.totalpoint)) {
                        data.totalpoint = Number(this.totalpoint);
                    }

                    data.monitor = this.monitor;

                    this.forwardurl && (data.forwardurl = this.forwardurl);

                    if (userlists.indexOf(this.createrToUser) == -1) {
                        me.$Message.error(me.$t("message.selectCorrectAccount"));
                        return;
                    }

                    if (this.userType < 3) {
                        data.creater = this.createrToUser;
                    } else {
                        data.creater = userName;
                    }

                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            editObject.teltype = String(data.teltype);
                            var newData = Object.assign(editObject, data);
                            newData.expirenotifytimestr = DateFormat.longToDateTimeStr(data.expirenotifytime, timeDifference);
                            me.tableData[me.editDeviceIndex] = newData;
                            utils.changeSingleItemData(me.recordsList, newData, 'deviceid');
                            isNeedRefresh = true;
                            me.$Message.success(me.$t("message.changeSucc"));
                        } else if (resp.status = -1) {
                            if (resp.cause !== null && resp.cause.indexOf("token") != -1) {
                                window.location.href = "index.html";
                            } else {
                                me.$Message.error(me.$t("message.changeFail"));
                            }
                        }
                    });
                },
                resetInfo: function() {
                    this.devicename = "";
                    this.devicetype = "";
                    this.simnum = "";
                    this.expirenotifytime = "";
                    this.loginenable = "0";
                    this.deviceenable = "0";
                    this.groupsList = [];
                    this.groupid = "";
                    this.reportedpoint = 0;
                    this.totalpoint = 1500;
                    this.forwardurl = "";
                    this.monitor = "";
                },
                setDeviceData: function() {
                    var me = this;
                    me.deviceid = editObject.deviceid;
                    me.simnum = editObject.simnum;
                    me.expirenotifytime = editObject.expirenotifytimestr;
                    me.devicename = editObject.devicename;
                    me.devicetype = editObject.devicetype;
                    me.loginenable = editObject.loginenable + "";
                    me.deviceenable = "" + editObject.deviceenable;
                    me.reportedpoint = editObject.reportedpoint;
                    me.totalpoint = editObject.totalpoint;
                    me.forwardurl = editObject.forwardurl;
                    // me.createrToUser = editObject.creater;
                    me.monitor = editObject.monitor;
                    me.teltype = String(editObject.teltype);
                    me.allowedit = String(editObject.allowedit);
                },
                getDeviceType: function() {
                    var me = this;
                    var deviceTypes = vstore.state.deviceTypes;
                    for (var key in deviceTypes) {
                        var item = deviceTypes[key];
                        var label = item.typename;
                        if (item.remark) {
                            label += "(" + item.remark + ")";
                        }
                        me.deviceTypeList.push({
                            value: item.devicetypeid,
                            label: label
                        });
                    }
                },
                selectedCmd: function(item) {
                    var me = this;
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                        me.createrToUser = item;
                    }, 100)
                },
                sosoValueChange: function() {
                    var me = this;
                    var value = this.createrToUser.toLowerCase();

                    if (this.timeoutIns != null) {
                        clearTimeout(this.timeoutIns);
                    }

                    if (!value.trim()) {
                        this.userlists = userlists;
                        return;
                    }

                    this.timeoutIns = setTimeout(function() {
                        me.filterMethod(value);
                    }, 100);
                },
                focus: function() {
                    this.isShowMatchDev = true;
                },
                blur: function() {
                    var me = this
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                    }, 300)
                },
                filterMethod: function(value) {
                    var list = [];
                    userlists.forEach(function(itme) {
                        if (itme.toLowerCase().indexOf(value) != -1) {
                            list.push(itme);
                        }
                    })
                    this.userlists = list;
                },
                queryGroupsByUserName: function(userName) {
                    me = this;
                    groupsList = [];

                    // utils.sendAjax(url,data,function(resp){
                    //     var groupsList = [];
                    //     if(resp.status === 0 && resp.grouplist){
                    //         resp.grouplist.forEach(function (group) { 
                    //             groupsList.push({label:group.groupname,value:group.groupid});
                    //         })
                    //     }
                    //     me.groupsList = groupsList;
                    // });
                    var groupid = editObject.groupid;
                    var foundGroupId = false;
                    for (var key in me.allGroups) {
                        var item = me.allGroups[key];
                        if (item.creater == userName) {
                            groupsList.push({
                                label: item.groupname,
                                value: item.groupid
                            });
                            if (item.groupid == groupid) {
                                foundGroupId = true;
                            }
                        }
                    }

                    me.groupsList = groupsList;
                    me.groupid = editObject.groupid;
                    if (foundGroupId) {
                        vueInstanse.groupid = editObject.groupid;
                    } else {
                        vueInstanse.groupid = 0;
                    }


                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.taleHeight = wHeight - 184;
                },
                queryGroupInfos: function(callback) {
                    var me = this;
                    utils.sendAjax(myUrls.queryGroupInfos(), {}, function(resp) {
                        if (resp.status === 0) {
                            resp.groups.forEach(function(item) {
                                me.allGroups[item.groupid] = item;
                            });
                        }
                        callback();
                    })
                },
                readWorkbookFromLocalFile1: function(file, callback) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var data = e.target.result;
                        var workbook = XLSX.read(data, {
                            type: 'binary'
                        });
                        if (callback) callback(workbook);
                    };
                    reader.readAsBinaryString(file);
                },
                parserExcelData1: function(excelData) {
                    try {
                        var indexY = 2;
                        var tableData = [];
                        while (true) {
                            var vinnoKey = this.excelX[0] + indexY; //设备ID
                            var policynoKey = this.excelX[1] + indexY; //防盗号

                            if (excelData[vinnoKey] == undefined) {
                                break;
                            }
                            tableData.push({
                                height: excelData[vinnoKey] ? excelData[vinnoKey].v : '',
                                volume: excelData[policynoKey] ? excelData[policynoKey].v : '',
                            })

                            indexY++;
                        }
                        this.taggingData1 = tableData;
                    } catch (error) {
                        console.log('error',error);
                        this.$Message.error(vRoot.$t('message.useTemplateTips'));   
                    }
                },
                readWorkbookFromLocalFile2: function(file, callback) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var data = e.target.result;
                        var workbook = XLSX.read(data, {
                            type: 'binary'
                        });
                        if (callback) callback(workbook);
                    };
                    reader.readAsBinaryString(file);
                },
                parserExcelData2: function(excelData) {

                    try {
                        var indexY = 2;
                        var tableData = [];
                        while (true) {
                            var vinnoKey = this.excelX[0] + indexY; //设备ID
                            var policynoKey = this.excelX[1] + indexY; //防盗号

                            if (excelData[vinnoKey] == undefined) {
                                break;
                            }

                            tableData.push({
                                height: excelData[vinnoKey] ? excelData[vinnoKey].v : '',
                                volume: excelData[policynoKey] ? excelData[policynoKey].v : '',
                            })

                            indexY++;
                        }
                        this.taggingData2 = tableData;
                    } catch (error) {
                        this.$Message.error(vRoot.$t('message.useTemplateTips'));
                    }
                },
                importTownerInfo1: function() {
                    this.fileEl1.files.length = 0;
                    this.fileEl1.value = "";
                    this.fileEl1.click();
                },
                importTownerInfo2: function() {
                    this.fileEl2.files.length = 0;
                    this.fileEl2.value = "";
                    this.fileEl2.click();
                },
                exportDevice1: function() {
                    var taggingColumns1 = deepClone(this.taggingColumns1);
                    taggingColumns1.pop();
                    taggingColumns1.shift();
                    this.$refs.taggingTab1.exportCsv({
                        filename: vRoot.$t('device.calibration'),  
                        columns: taggingColumns1,
                        data: this.taggingData1,
                        quoted: true,
                    });
                },
                exportDevice2: function() {
                    var taggingColumns2 = deepClone(this.taggingColumns2);
                    taggingColumns2.pop();
                    taggingColumns2.shift();
                    this.$refs.taggingTab2.exportCsv({
                        filename: vRoot.$t('device.calibration'),
                        columns: taggingColumns2,
                        data: this.taggingData2,
                        quoted: true,
                    });
                },
            },
            watch: {
                isShowMatchDev: function() {
                    if (!this.isShowMatchDev) {
                        this.iconState = "ios-arrow-down";
                    } else {
                        this.iconState = "ios-arrow-up";
                    }
                },
                createrToUser: function(newVal) {
                    if (userlists.indexOf(newVal) != -1) {
                        this.queryGroupsByUserName(newVal);
                    } else {
                        this.groupsList = [];
                        this.groupid = 0;
                    }
                }
            },
            computed: {
                isEditDeviceType: function() {
                    return this.userType > 0;
                },
                disabledOverdueTime: function() {
                    return this.userType > 3;
                },
                isAlloweditDisabled: function() {
                    return !(Number(this.userType) <= 1);
                }
            },
            mixins: [mixIn],
            mounted: function() {
                var me = this;
                this.userlists = userlists;
                this.userType = vstore.state.userType;
                this.allGroups = {};
                this.queryGroupInfos(function() {
                    me.getDeviceList(false, 0);
                });
                this.getDeviceType();
                this.calcTableHeight();
                this.fileEl1 = document.getElementById('file1');
                this.fileEl1.onchange = function(e) {
                    var idx = e.srcElement.value.lastIndexOf('.');
                    var houzhui = e.srcElement.value.slice(idx);
                    // if (houzhui.indexOf('xls') == -1) {
                    //     me.$Message.error("请选择我们提供的模版提交");
                    //     return;
                    // }
                    var file = e.target.files[0]
                    me.readWorkbookFromLocalFile1(file, function(workbook) {
                        me.parserExcelData1(workbook.Sheets['测量标定']);
                    });
                };
                this.excelX = ['A', 'B', 'C'];
                this.fileEl2 = document.getElementById('file2');
                this.fileEl2.onchange = function(e) {
                    var idx = e.srcElement.value.lastIndexOf('.');
                    var houzhui = e.srcElement.value.slice(idx);

                    var file = e.target.files[0]
                    me.readWorkbookFromLocalFile2(file, function(workbook) {
                        me.parserExcelData2(workbook.Sheets['测量标定']);
                    });
                };
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>